<template>
  <div class="image-upload">
    <header class="header">
      <div class="header-left">
        <el-button type="text" @click="$router.back()"><el-icon><ArrowLeft /></el-icon></el-button>
        <h1>影像上传</h1>
      </div>
      <div class="header-right">
        <el-dropdown>
          <span class="user-info">
            <el-avatar :size="32" :src="userStore.currentUser?.avatar"></el-avatar>
            <span>{{ userStore.currentUser?.name || '医生用户' }}</span>
            <el-icon class="el-icon--right"><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <div class="content">
      <el-card class="upload-card">
        <template #header>
          <div class="card-header">
            <span>上传患者影像</span>
            <el-badge :value="uploadQueue.length" type="danger" v-if="uploadQueue.length > 0"></el-badge>
          </div>
        </template>

        <div class="patient-info-section">
          <h3>患者信息</h3>
          <el-form :model="patientInfo" label-width="120px" class="patient-form">
            <el-form-item label="患者姓名" prop="name">
              <el-input v-model="patientInfo.name" placeholder="请输入患者姓名"></el-input>
            </el-form-item>
            <el-form-item label="患者ID" prop="id">
              <el-autocomplete
                  v-model="patientIdInput"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入患者ID（1-5）或点击搜索按钮"
                  :trigger-on-focus="true"
                  :allow-create="false"
                  :min-length="0"
                  :debounce="0"
                  :popper-class="'patient-autocomplete-popup'"
                  value-key="id"
                  @select="selectPatient"
                  @input="handleInputChange"
                  @focus="handleFocus"
                  clearable
                  style="width: 100%"
                >
                <template #prefix>
                  <el-icon class="el-input__icon"><Search /></el-icon>
                </template>
                <template #suffix>
                  <el-button @click="searchPatientById" :loading="searching" text>
                    <el-icon><Search /></el-icon>
                  </el-button>
                </template>
                <template #default="{ item }">
                  <div style="padding: 5px;">
                    <div><strong>患者ID:</strong> {{ item.id }}</div>
                    <div><strong>姓名:</strong> {{ item.name }}</div>
                    <div><strong>性别:</strong> {{ item.gender }}</div>
                    <div><strong>年龄:</strong> {{ item.age }}岁</div>
                    <div v-if="item.diagnosis"><strong>诊断:</strong> {{ item.diagnosis }}</div>
                  </div>
                </template>
              </el-autocomplete>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="patientInfo.gender">
                <el-radio label="男">男</el-radio>
                <el-radio label="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model.number="patientInfo.age" type="number" placeholder="请输入患者年龄"></el-input>
            </el-form-item>
            <el-form-item label="检查类型" prop="examType">
              <el-select v-model="patientInfo.examType" placeholder="请选择检查类型">
                <el-option label="CT" value="CT"></el-option>
                <el-option label="MRI" value="MRI"></el-option>
                <el-option label="X光" value="X光"></el-option>
                <el-option label="超声" value="超声"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>

        <div class="upload-section">
          <h3>影像文件上传</h3>
          <el-upload
            v-model:file-list="fileList"
            :auto-upload="false"
            :multiple="true"
            :limit="10"
            accept=".dcm,.nii,.nii.gz,.jpg,.jpeg,.png"
            :on-exceed="handleExceed"
            :on-change="handleFileChange"
            drag
            class="upload-demo"
          >
            <el-icon class="el-icon--upload"><UploadFilled /></el-icon>
            <div class="el-upload__text">
              点击或拖拽文件到此区域上传
            </div>
            <template #tip>
              <div class="el-upload__tip">
                支持单个或批量上传，最多10个文件，支持格式：DCM、NII、NII.GZ、JPG、JPEG、PNG
              </div>
            </template>
          </el-upload>

          <div class="upload-actions">
            <el-button type="primary" @click="submitUpload" :loading="uploading" :disabled="fileList.length === 0">
              <el-icon><Upload /></el-icon>
              {{ uploading ? '上传中...' : '开始上传' }}
            </el-button>
            <el-button @click="clearFiles">
              <el-icon><Delete /></el-icon>
              清空文件
            </el-button>
          </div>
        </div>

        <!-- 上传进度 -->
        <div class="upload-progress" v-if="uploading">
          <h4>上传进度</h4>
          <div v-for="(task, index) in uploadQueue" :key="index" class="progress-item">
            <div class="progress-header">
              <span class="file-name">{{ task.file.name }}</span>
              <span class="file-size">{{ formatFileSize(task.file.size) }}</span>
            </div>
            <el-progress :percentage="task.percentage" :status="task.status"></el-progress>
          </div>
        </div>

        <!-- 上传完成提示 -->
        <el-dialog
          v-model="uploadSuccessVisible"
          title="上传成功"
          width="400px"
          :show-close="false"
        >
          <div class="success-content">
            <el-icon class="success-icon"><SuccessFilled /></el-icon>
            <p>影像上传成功！系统正在进行AI分析，请稍后查看结果。</p>
          </div>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="gotoAiReview">前往AI复核</el-button>
              <el-button @click="continueUpload">继续上传</el-button>
            </span>
          </template>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores/user';
import { useImagingStore } from '../stores/imaging';
import { ArrowLeft, Upload, UploadFilled, Delete, SuccessFilled, ArrowDown, Search } from '@element-plus/icons-vue';
import { ElMessage, ElAutocomplete } from 'element-plus';
import axios from 'axios';

export default {
  name: 'ImageUpload',
  components: {
    ArrowLeft,
    Upload,
    UploadFilled,
    Delete,
    SuccessFilled,
    ArrowDown,
    Search,
    ElAutocomplete
  },
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    const imagingStore = useImagingStore();
    
    // 患者信息
    const patientInfo = reactive({
      name: '',
      id: '',
      gender: '男',
      age: '',
      examType: ''
    });
    
    // 搜索状态和数据
    const searching = ref(false);
    const searchResult = ref(null);
    const allPatients = ref([]);
    const filteredPatients = ref([]);
    const patientIdInput = ref('');
    
    // 加载所有患者数据
    const loadPatients = async () => {
      try {
        console.log('正在获取患者数据...');
        const response = await axios.get('/api/patients');
        console.log('API响应状态:', response.status);
        console.log('API响应数据类型:', Array.isArray(response.data) ? '数组' : '对象');
        console.log('获取患者数据成功:', response.data);
        
        // 确保allPatients始终是数组类型
        const patientsData = Array.isArray(response.data) ? response.data : [response.data];
        
        console.log('处理后的患者数据数量:', patientsData.length);
        
        // 确保每个患者对象都有必要的字段，特别是处理age字段
        allPatients.value = patientsData.map((patient, index) => {
          console.log(`处理患者 ${index + 1}:`, patient);
          // 确保患者对象包含所有必要字段
          const processedPatient = {
            id: patient.id !== undefined ? patient.id : '',
            name: patient.name || '未知姓名',
            gender: patient.gender || '男',
            age: patient.age !== undefined && patient.age !== null ? patient.age : '',
            birthDate: patient.birthDate || '',
            diagnosis: patient.diagnosis || ''
          };
          console.log(`处理后的患者 ${index + 1}:`, processedPatient);
          return processedPatient;
        });
        
        console.log('可用患者数量:', allPatients.value.length);
        console.log('所有患者数据详情:', allPatients.value);
        
        // 显示成功消息
        ElMessage.success(`成功加载 ${allPatients.value.length} 位患者信息`);
      } catch (error) {
        console.error('加载患者数据失败:', error);
        console.error('错误详情:', error.response ? error.response.data : error.message);
        ElMessage.error('加载患者数据失败');
        // 如果API调用失败，使用默认数据作为备用
        // 更新默认数据以匹配后端新的数据结构
        allPatients.value = [
          { id: 1, name: '张三', birthDate: '1988-01-15', gender: '男', diagnosis: '肺炎' },
          { id: 2, name: '李四', birthDate: '1981-05-20', gender: '女', diagnosis: '肺癌' },
          { id: 3, name: '王五', birthDate: '1967-09-10', gender: '男', diagnosis: '支气管炎' },
          { id: 4, name: '赵六', birthDate: '1994-12-03', gender: '女', diagnosis: '肺结核' },
          { id: 5, name: '钱七', birthDate: '1975-07-25', gender: '男', diagnosis: '哮喘' }
        ];
        // 为默认数据计算年龄
        allPatients.value = allPatients.value.map(patient => ({
          ...patient,
          age: calculateAge(patient.birthDate) || ''
        }));
        console.log('使用默认患者数据:', allPatients.value);
        ElMessage.info('使用备用患者数据');
      }
    };
    
    // 组件挂载时加载患者数据
    onMounted(async () => {
      console.log('组件挂载，开始加载患者数据...');
      await loadPatients();
      console.log('患者数据加载完成');
    });
    
    // 计算年龄的辅助函数
    const calculateAge = (birthDate) => {
      if (!birthDate) return '';
      const today = new Date();
      const birth = new Date(birthDate);
      if (isNaN(birth.getTime())) return '';
      let age = today.getFullYear() - birth.getFullYear();
      const m = today.getMonth() - birth.getMonth();
      if (m < 0 || (m === 0 && today.getDate() < birth.getDate())) age--;
      return age > 0 ? age : '';
    };
    
    // 实现自动补全搜索方法，支持患者ID和姓名搜索
    const querySearch = (queryString, callback) => {
      console.log('搜索查询:', queryString);
      
      // 确保allPatients.value是数组类型
      const patientsData = Array.isArray(allPatients.value) ? allPatients.value : [];
      
      // 即使查询字符串为空，也返回所有患者（当获得焦点时）
      let results = [];
      const searchTerm = queryString ? String(queryString).trim() : '';
      const searchTermLower = searchTerm.toLowerCase();
      
      console.log('处理后的搜索词:', searchTerm);
      
      if (!searchTerm) {
        // 空查询时返回所有患者
        results = patientsData;
      } else {
        // 尝试将搜索词转换为数字（数据库中的ID是数字类型）
        const searchTermNum = parseInt(searchTerm);
        const isNumericSearch = !isNaN(searchTermNum);
        console.log('是否为数字搜索:', isNumericSearch, '数字值:', searchTermNum);
        
        // 同时支持患者ID和姓名的搜索
        results = patientsData.filter(patient => {
          if (!patient || patient.id === undefined) {
            console.log('跳过无效患者对象:', patient);
            return false;
          }
          
          // 数字ID精确匹配
          const exactIdMatch = isNumericSearch && patient.id === searchTermNum;
          
          // 字符串形式的ID模糊匹配
          const patientIdStr = String(patient.id);
          const fuzzyIdMatch = patientIdStr.includes(searchTerm);
          
          // 姓名模糊匹配（支持中英文姓名）
          const nameLower = patient.name ? String(patient.name).toLowerCase() : '';
          const fuzzyNameMatch = nameLower.includes(searchTermLower);
          
          const match = exactIdMatch || fuzzyIdMatch || fuzzyNameMatch;
          console.log(`患者 ${patient.id} (${patient.name}): 精确ID匹配=${exactIdMatch}, 模糊ID匹配=${fuzzyIdMatch}, 姓名匹配=${fuzzyNameMatch}`);
          
          return match;
        });
      }
      
      console.log('最终搜索结果数量:', results.length);
      console.log('最终搜索结果:', results);
      filteredPatients.value = results;
      
      // 直接回调，确保结果立即显示
      callback(results);
    };
    
    // selectPatient函数已移至下方，使用改进版本
    // 该函数负责处理患者选择和信息填充，支持birthDate和age字段
    
    // 处理输入变化，增强实时比对功能，支持ID和姓名搜索
    const handleInputChange = (value) => {
      console.log('输入变化:', value);
      // 当清空输入时，清除患者信息
      if (!value || value.trim() === '') {
        patientInfo.name = '';
        patientInfo.gender = '男';
        patientInfo.age = '';
        patientInfo.id = '';
        return;
      }
      
      const trimmedValue = String(value).trim();
      const trimmedValueLower = trimmedValue.toLowerCase();
      console.log('处理后的输入值:', trimmedValue);
      
      // 尝试将搜索词转换为数字（用于ID匹配）
      const searchTermNum = parseInt(trimmedValue);
      const isNumericSearch = !isNaN(searchTermNum);
      
      console.log('尝试在本地数据中直接查找...');
      
      // 先尝试精确匹配数字ID
      if (isNumericSearch) {
        const exactIdMatch = allPatients.value?.find(patient => patient && patient.id === searchTermNum);
        
        if (exactIdMatch) {
          console.log('找到精确匹配的患者:', exactIdMatch);
          // 自动选择精确匹配的患者
          selectPatient(exactIdMatch);
          return;
        }
      }
      
      // 尝试精确匹配姓名
      const exactNameMatch = allPatients.value?.find(patient => {
        if (!patient || !patient.name) return false;
        return String(patient.name).toLowerCase() === trimmedValueLower;
      });
      
      if (exactNameMatch) {
        console.log('找到精确匹配姓名的患者:', exactNameMatch);
        selectPatient(exactNameMatch);
        return;
      }
      
      // 如果没有精确匹配，触发搜索函数进行模糊匹配
      console.log('未找到精确匹配，触发搜索函数...');
      querySearch(value, (results) => {
        console.log('输入变化时的搜索结果:', results);
        
        if (results.length === 1) {
          // 如果只有一个模糊匹配的结果，自动选择
          console.log('只有一个匹配结果，自动选择:', results[0]);
          selectPatient(results[0]);
        }
      });
    };
    
    // 格式化显示的患者信息
    const formatPatientDisplay = (item) => {
      if (item) {
        return `${item.id} - ${item.name} (${item.gender}, ${item.age}岁)`;
      }
      return '';
    };
    
    // 通过患者ID或姓名搜索患者（按钮触发的搜索）
    const searchPatientById = async () => {
      // 支持空搜索，显示所有患者
      searching.value = true;
      try {
        console.log('开始搜索患者，输入值:', patientIdInput.value);
        
        // 确保allPatients.value是数组类型
        const patientsData = Array.isArray(allPatients.value) ? allPatients.value : [];
        
        if (!patientIdInput.value || patientIdInput.value.trim() === '') {
          // 空输入时显示所有患者
          console.log('空输入，显示所有患者');
          ElMessage.info('显示所有患者');
          // 手动触发下拉框显示所有患者
          querySearch('', (results) => {
            console.log('显示患者数量:', results.length);
          });
        } else {
          // 处理搜索词
          const trimmedValue = String(patientIdInput.value).trim();
          const trimmedValueLower = trimmedValue.toLowerCase();
          console.log('搜索关键词:', trimmedValue);
          
          // 尝试将搜索词转换为数字（用于ID匹配）
          const searchTermNum = parseInt(trimmedValue);
          const isNumericSearch = !isNaN(searchTermNum);
          
          // 1. 先尝试精确匹配数字ID
          if (isNumericSearch) {
            const exactIdMatch = patientsData.find(p => p && p.id === searchTermNum);
            
            if (exactIdMatch) {
              console.log('本地找到精确匹配ID的患者:', exactIdMatch);
              selectPatient(exactIdMatch);
              return;
            }
          }
          
          // 2. 尝试精确匹配姓名
          const exactNameMatch = patientsData.find(p => {
            if (!p || !p.name) return false;
            return String(p.name).toLowerCase() === trimmedValueLower;
          });
          
          if (exactNameMatch) {
            console.log('本地找到精确匹配姓名的患者:', exactNameMatch);
            selectPatient(exactNameMatch);
            return;
          }
          
          // 3. 如果没有精确匹配，尝试模糊匹配（同时匹配ID和姓名）
          const fuzzyMatches = patientsData.filter(p => {
            if (!p || p.id === undefined) return false;
            
            const idStr = String(p.id);
            const nameLower = String(p.name || '').toLowerCase();
            
            const idMatch = idStr.includes(trimmedValue);
            const nameMatch = nameLower.includes(trimmedValueLower);
            
            return idMatch || nameMatch;
          });
          
          if (fuzzyMatches.length > 0) {
            // 排序：精确匹配在前，模糊匹配在后
            fuzzyMatches.sort((a, b) => {
              const aIdMatch = String(a.id) === trimmedValue;
              const bIdMatch = String(b.id) === trimmedValue;
              const aNameMatch = a.name ? String(a.name).toLowerCase() === trimmedValueLower : false;
              const bNameMatch = b.name ? String(b.name).toLowerCase() === trimmedValueLower : false;
              
              // 精确匹配优先
              if (aIdMatch || aNameMatch) return -1;
              if (bIdMatch || bNameMatch) return 1;
              return 0;
            });
            
            // 使用排序后的第一个结果
            const patient = fuzzyMatches[0];
            console.log('本地找到模糊匹配的患者:', patient);
            selectPatient(patient);
          } else {
            // 尝试从服务器获取（支持ID搜索）
            try {
              console.log('尝试从服务器获取患者信息');
              const response = await axios.get(`/api/patients/${patientIdInput.value}`);
              console.log('服务器返回患者:', response.data);
              
              // 处理从服务器返回的数据，确保格式一致
              const patientData = {
                id: response.data.id !== undefined ? response.data.id : '',
                name: response.data.name || '未知姓名',
                gender: response.data.gender || '男',
                age: response.data.age !== undefined ? response.data.age : '',
                birthDate: response.data.birthDate || '',
                diagnosis: response.data.diagnosis || ''
              };
              
              selectPatient(patientData);
            } catch (err) {
              console.error('未找到患者:', err.response ? err.response.data : err.message);
              searchResult.value = null;
              ElMessage.warning('未找到该患者信息');
              // 清空患者信息
              patientInfo.name = '';
              patientInfo.gender = '男';
              patientInfo.age = '';
            }
          }
        }
      } catch (error) {
        console.error('搜索患者失败:', error);
        ElMessage.error('搜索失败，请重试');
      } finally {
        searching.value = false;
      }
    };
    
    // 改进selectPatient函数，确保数据一致性
    const selectPatient = (item) => {
      try {
        // 确保item存在且是有效的对象
        if (!item || typeof item !== 'object') {
          console.error('选择患者时传入了无效的患者对象:', item);
          ElMessage.warning('未找到有效患者信息');
          return;
        }
        
        console.log('选择的患者对象详情:', item);
        
        // 完整处理患者信息，确保所有字段都有合理的默认值
        patientInfo.id = item.id !== undefined ? item.id : '';
        patientInfo.name = item.name || '未知姓名';
        patientInfo.gender = item.gender || '男';
        
        // 优先使用item中的age，如果没有则尝试通过birthDate计算
        if (item.age !== undefined && item.age !== null && item.age !== '') {
          patientInfo.age = item.age;
        } else if (item.birthDate) {
          patientInfo.age = calculateAge(item.birthDate);
        } else {
          patientInfo.age = '';
        }
        
        // 显示更友好的成功消息，使用患者ID作为后备
        const patientDisplay = patientInfo.name !== '未知姓名' ? patientInfo.name : `ID: ${patientInfo.id}`;
        ElMessage.success('已选择患者：' + patientDisplay);
        
        console.log('患者信息已填充:', patientInfo);
      } catch (error) {
        console.error('选择患者过程中出错:', error);
        ElMessage.error('处理患者信息时出错');
      }
    };
    
    // 组件挂载时加载患者数据
    onMounted(() => {
      console.log('组件挂载，开始加载患者数据...');
      loadPatients().then(() => {
        console.log('患者数据加载完成，可用数据:', allPatients.value?.length || 0);
        // 初始时可以显示所有患者
        if (allPatients.value?.length > 0) {
          console.log('初始患者数据:', allPatients.value);
        }
      });
    });
    
    // 监听patientInfo.id变化
    watch(() => patientInfo.id, (newVal) => {
      patientIdInput.value = newVal;
    });
    
    // 处理自动补全组件获得焦点
    const handleFocus = () => {
      console.log('输入框获得焦点');
      // 强制触发搜索，显示所有患者
      querySearch('', (results) => {
        console.log('焦点时的搜索结果:', results);
      });
    };

    // 文件列表
    const fileList = ref([]);
    const uploadQueue = ref([]);
    const uploading = ref(false);
    const uploadSuccessVisible = ref(false);

    // 处理文件超出数量限制
    const handleExceed = (files) => {
      ElMessage.warning(`当前限制上传 10 个文件，本次选择了 ${files.length} 个文件，已自动过滤多余的文件`);
    };

    // 处理文件变化
    const handleFileChange = (file, newFileList) => {
      fileList.value = newFileList;
    };

    // 格式化文件大小
    const formatFileSize = (bytes) => {
      if (bytes === 0) return '0 B';
      const k = 1024;
      const sizes = ['B', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];
    };

    // 提交上传（真实调用后端）
    const submitUpload = async () => {
      if (!patientInfo.id) {
        ElMessage.error('请先通过搜索选择患者');
        return;
      }
      if (fileList.value.length === 0) {
        ElMessage.error('请选择要上传的文件');
        return;
      }
      uploading.value = true;
      uploadQueue.value = fileList.value.map(file => ({ file, percentage: 0, status: 'success' }));
      try {
        for (let i = 0; i < uploadQueue.value.length; i++) {
          const task = uploadQueue.value[i];
          const formData = new FormData();
          formData.append('image', task.file.raw);
          formData.append('patientId', String(patientInfo.id));
          if (userStore.currentUser?.role === 'doctor') {
            formData.append('doctorId', String(userStore.currentUser.id));
          }
          await imagingStore.uploadImage(formData, (p) => {
            task.percentage = p;
          });
        }
        uploadSuccessVisible.value = true;
      } catch (error) {
        ElMessage.error('上传失败：' + (error?.message || '未知错误'));
      } finally {
        uploading.value = false;
      }
    };

    // 清空文件
    const clearFiles = () => {
      fileList.value = [];
      uploadQueue.value = [];
    };

    // 前往AI复核页面
    const gotoAiReview = () => {
      uploadSuccessVisible.value = false;
      router.push('/ai-review');
    };

    // 继续上传
    const continueUpload = () => {
      uploadSuccessVisible.value = false;
      clearFiles();
    };

    // 退出登录
    const handleLogout = () => {
      userStore.logout();
      router.push('/login');
    };

    return {
      userStore,
      patientInfo,
      fileList,
      uploadQueue,
      uploading,
      uploadSuccessVisible,
      searching,
      searchResult,
      patientIdInput,
      filteredPatients,
      handleExceed,
      handleFileChange,
      formatFileSize,
      submitUpload,
      clearFiles,
      gotoAiReview,
      continueUpload,
      handleLogout,
      querySearch,
      selectPatient,
      handleInputChange,
      formatPatientDisplay,
      searchPatientById,
      handleFocus
    };
  }
};
</script>

<style scoped>
.image-upload {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header h1 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-info span {
  margin: 0 8px;
}

.content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.upload-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.patient-info-section,
.upload-section {
  margin-top: 20px;
}

.patient-info-section h3,
.upload-section h3 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 16px;
}

.patient-form {
  margin-top: 10px;
}

.upload-demo {
  margin: 20px 0;
}

.upload-actions {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 10px;
}

.upload-progress {
  margin-top: 20px;
}

.upload-progress h4 {
  margin: 0 0 15px 0;
  color: #303133;
  font-size: 14px;
}

.progress-item {
  margin-bottom: 15px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.file-name {
  font-size: 14px;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: 10px;
}

.file-size {
  font-size: 12px;
  color: #909399;
}

.success-content {
  text-align: center;
  padding: 20px 0;
}

.success-content .success-icon {
  font-size: 48px;
  color: #67c23a;
  margin-bottom: 16px;
}

.success-content p {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.dialog-footer {
  text-align: center;
  width: 100%;
}

@media (max-width: 768px) {
  .content {
    padding: 15px;
  }
  
  .header {
    padding: 0 15px;
  }
  
  .upload-card {
    max-width: 100%;
  }
  
  .upload-actions {
    flex-direction: column;
  }
  
  .progress-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .file-size {
    margin-top: 5px;
  }
}
</style>